<template>
    <!-- 签到功能 -->
      <el-card class="signin-card">
        <p>点击签到</p>
        <hr>
        <div class="signin-contain">
          <div @click="sign" class="signin" v-if="this.percent">
            <el-progress type="circle" :percentage="0" v-if="this.percent">
            </el-progress>
          </div>
          <div v-else class="signined">
            <div class="signined-tendency">
                 <p>今日甜度：</p>
              <strong :style="fontColor">{{ message.totalfortune }}</strong>
            </div>
            <div class="signined-smallfortune">
              <div class="signined-smallfortune1">
                <p class="fortune" :style="Fortune1Color">{{ message.smallfortune1 }}{{ message.activity1 }}</p>
                <p class="description">{{ message.description1 }}</p>
              </div>
              <div class="signined-smallfortune2">
                <p class="fortune" :style="Fortune2Color">{{ message.smallfortune2 }}{{ message.activity2 }}</p>
                <p class="description">{{ message.description2 }}</p>
              </div>
            </div>
            <div class="signined-totalTime">
              您已经成功打卡<span class="day">{{ message.totalTime }}</span>天
            </div>
          </div>
        </div>
      </el-card>


</template>

<script>
import { signIn } from "@/api/signIn";
export default {
  name: 'index-sigin',
  data() {
    return {
      list: [],
      res: '',
      /* 签到的总天数 */
      days: '',
      signOK: '',
      percent: true,
      message: {
        activity1: '',
        activity2: '',
        description1: '',
        description2: '',
        id: '',
        lastTime: '',
        smallfortune1: '',
        smallfortune2: '',
        totalTime: 0,
        totalfortune: ''
      },
      // 甜度字体颜色
      fontColor:'',
      // 运势字体颜色
      Fortune1Color:'',
      Fortune2Color:''

    }
  },
  created() {
    // this.getSignIn();
  },
  props: {

  },
  components: {
  },
  mounted() {

  },
  methods: {
    sign() {
      this.percent = false
      this.getSignIn();
    },
    getSignIn() {
      signIn().then((res) => {
        this.message = res.data.data
        console.log(this.message)
        if(this.message.totalfortune<=60){
          this.fontColor = 'color:#b088ff'
        }else if(this.message.totalfortune<=70){
          this.fontColor = 'color:#99bbff'
        }else if(this.message.totalfortune<=80){
          this.fontColor = 'color:#77ffcc'
        }else if(this.message.totalfortune<=90){
          this.fontColor = 'color:#ffbb66'
        }else{
          this.fontColor = 'color:#ff8888'
        }
        if(this.message.smallfortune1 == '宜：'){
          this.Fortune1Color = 'color:#3fa074'
        }else{
          this.Fortune1Color = 'color:#ff3333'
        }
         if(this.message.smallfortune2 == '宜：'){
          this.Fortune2Color = 'color:#3fa074'
        }else{
          this.Fortune2Color = 'color:#ff3333'
        }
        this.$message({
          type: 'success',
          message: this.message.lastTime + '签到成功'
        })
      }).catch((err) => {
        this.$message.error('签到失败');
      });

    }



  }
}
</script>

<style scoped lang="less">
.signin-card {
  .signin-contain {
    display: flex;
    height: 23vh;
    width: 23vw;
    justify-content: center;
    align-items: center;

    .signined {
      .signined-tendency {
        text-align: center;

        strong {
          display: inline-block;
          font-size: 60px;
          font-weight: bold;
          margin-top: 0px;
          // color: #ff8888;

        }
      }

      .signined-smallfortune {
        line-height: 8px;
        font-style: 12px;
        display: flex;

        .fortune {
          // color: #3fa074;
          text-align: center;
        }

        .description {
          color: #7f7f7f;
          font-size: 8px;
        }

        .signined-smallfortune1 {
          float: left;

        }

        .signined-smallfortune2 {
          float: right;
          margin-left: 50px;
        }
      }

      .signined-totalTime {
        text-align: center;
        color: #7f7f7f;
        font-size: 8px;

        .day {
          color: #3fa074;
          font-weight: bolder;

        }
      }
    }
    .signin {
      // background-color: #8c8c8c;
    }
  }
}

.clock-contain {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
</style>
